<template>
    <div id="cart">
        <nav-bar class="nav-bar">
            <div slot="center">购物车({{nums}})</div>
        </nav-bar>
        <scroll class="content"
                ref="scroll"
                :obj="obj"
                >
            <cart-list class="cart-list"></cart-list>
        </scroll>
        <bottom-bar></bottom-bar>
    </div>
</template>

<script>
    import Scroll from 'components/common/scroll/Scroll'
    import NavBar from 'components/common/navbar/NavBar'
    
    import CartList from './childComps/CartList'
    import BottomBar from './childComps/BottomBar'
    

export default {
    name:'Cart',
    components: {
        NavBar,
        Scroll,
        CartList,
        BottomBar
    },
    computed: {
        nums() {
            return this.$store.state.cartList.length;
        }
    },
    data () {
        return {
            obj:{click:true,probeType:2,pullUpLoad:true},
            count:1
        }
    },
    beforeRouteEnter (to, from, next)  {
        // 无法获取this
        next();
    },
    // 被keep-alive包裹， 激活时调用
    activated () {
        this.$refs.scroll.refresh();
    }
}
</script>

<style scoped>
    .cart {
        height: 100vh;
    }

    .nav-bar {
        background-color: var(--color-tint);
        font-weight: 700;
        color: #fff;
    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        bottom: 93px;
    }

</style>